<template>
  <div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <!-- 头部区域 -->
    <div class="p-6 border-b border-gray-100">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <div class="p-2 bg-blue-50 rounded-lg">
            <i class="fas fa-box text-blue-600 text-lg"></i>
          </div>
          <div>
            <h2 class="text-xl font-semibold text-gray-800">我的包裹</h2>
            <p class="text-sm text-gray-500 mt-1">管理您发布的代取包裹</p>
          </div>
        </div>
        
        <!-- 发布新包裹按钮 -->
        <button @click="publishNewParcel"
                class="group px-5 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg 
                       hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-md 
                       hover:shadow-lg transform hover:-translate-y-0.5 flex items-center space-x-2">
          <i class="fas fa-plus text-sm group-hover:rotate-90 transition-transform duration-200"></i>
          <span class="font-medium">发布包裹</span>
        </button>
      </div>
    </div>


    <!-- 包裹列表 -->
    <div class="p-6">
      <!-- 无数据时显示 -->
      <div v-if="parcels.length === 0" class="text-center py-12">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-2">
          <i class="fas fa-box-open text-gray-400 text-2xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-800 mb-2">暂无包裹</h3>
        <p class="text-gray-500 mb-6">您还没有发布任何包裹</p>
        <button @click="publishNewParcel"
                class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
          立即发布包裹
        </button>
      </div>

      <!-- 有数据时显示列表 -->
      <div v-else class="space-y-4">
        <div v-for="(parcel, index) in displayedParcels" :key="index"
             class="group bg-white rounded-xl border border-gray-200 hover:border-gray-300 
                    hover:shadow-md transition-all duration-200 overflow-hidden">
          
          <!-- 包裹卡片头部 -->
          <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-3">
                <div class="p-2 rounded-lg" :class="getStatusBgColor(parcel.status)">
                  <i class="fas fa-box text-sm" :class="getStatusIconColor(parcel.status)"></i>
                </div>
                <div>
                  <div class="flex items-center space-x-2">
                    <span class="font-semibold text-gray-800">取件码: {{ parcel.trackingNumber }}</span>
                    <span class="px-2 py-1 text-xs font-medium rounded-full" :class="getStatusClass(parcel.status)">
                      {{ parcel.status }}
                    </span>
                  </div>
                  <p class="text-xs text-gray-500 mt-1">
                    发布时间: {{ parcel.createdAt || "未知" }}
                  </p>
                </div>
              </div>
              
              <!-- 操作按钮 -->
              <div class="flex items-center space-x-2">
                <button v-if="parcel.status === '待接单'"
                        @click="editParcel(parcel)"
                        class="group px-3 py-2 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 
                               rounded-lg transition-all duration-200 shadow-sm hover:shadow-md 
                               transform hover:-translate-y-0.5 flex items-center space-x-1.5"
                        title="编辑包裹">
                  <i class="fas fa-edit text-sm group-hover:scale-110 transition-transform"></i>
                  <span class="text-xs font-medium">编辑</span>
                </button>
                <button v-if="parcel.status !== '已到达'"
                        @click="cancelParcel(parcel)"
                        class="group px-3 py-2 bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 
                               rounded-lg transition-all duration-200 shadow-sm hover:shadow-md 
                               transform hover:-translate-y-0.5 flex items-center space-x-1.5"
                        title="取消包裹">
                  <i class="fas fa-times text-sm group-hover:scale-110 transition-transform"></i>
                  <span class="text-xs font-medium">取消</span>
                </button>
                <button @click="toggleDetails(index)"
                        class="group px-3 py-2 bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-700 
                               rounded-lg transition-all duration-200 shadow-sm hover:shadow-md 
                               transform hover:-translate-y-0.5 flex items-center space-x-1.5"
                        :title="expandedItems.includes(index) ? '收起详情' : '展开详情'">
                  <i :class="[
                    'fas text-sm transition-all duration-200 group-hover:scale-110',
                    expandedItems.includes(index) ? 'fa-chevron-up' : 'fa-chevron-down'
                  ]"></i>
                  <span class="text-xs font-medium">
                    {{ expandedItems.includes(index) ? '收起' : '详情' }}
                  </span>
                </button>
              </div>
            </div>
          </div>

          <!-- 包裹详细信息 -->
          <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div class="flex items-center space-x-3">
                <div class="p-2 bg-blue-50 rounded-lg">
                  <i class="fas fa-user text-blue-600 text-sm"></i>
                </div>
                <div>
                  <p class="text-xs text-gray-500">收件人</p>
                  <p class="font-medium text-gray-800">{{ parcel.receiver.name }}</p>
                  <p class="text-xs text-gray-600">{{ parcel.receiver.contact }}</p>
                </div>
              </div>
              
              <div class="flex items-center space-x-3">
                <div class="p-2 bg-green-50 rounded-lg">
                  <i class="fas fa-phone text-green-600 text-sm"></i>
                </div>
                <div>
                  <p class="text-xs text-gray-500">联系电话</p>
                  <p class="font-medium text-gray-800">{{ parcel.phone }}</p>
                </div>
              </div>
              
              <div class="flex items-center space-x-3">
                <div class="p-2 bg-purple-50 rounded-lg">
                  <i class="fas fa-clock text-purple-600 text-sm"></i>
                </div>
                <div>
                  <p class="text-xs text-gray-500">
                    {{ parcel.status === "已到达" ? "到达时间" : "预计到达" }}
                  </p>
                  <p class="font-medium text-gray-800">
                    {{ parcel.arrivalTime || parcel.estimatedTime || "待确定" }}
                  </p>
                </div>
              </div>
            </div>

            <!-- 展开的详细信息 -->
            <div v-if="expandedItems.includes(index)" 
                 class="mt-4 pt-4 border-t border-gray-100 animate-fadeIn">
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="flex items-center space-x-3">
                  <div class="p-2 bg-orange-50 rounded-lg">
                    <i class="fas fa-tag text-orange-600 text-sm"></i>
                  </div>
                  <div>
                    <p class="text-xs text-gray-500">物品描述</p>
                    <p class="font-medium text-gray-800">{{ parcel.description }}</p>
                  </div>
                </div>
                
                <div class="flex items-center space-x-3">
                  <div class="p-2 bg-indigo-50 rounded-lg">
                    <i class="fas fa-map-marker-alt text-indigo-600 text-sm"></i>
                  </div>
                  <div>
                    <p class="text-xs text-gray-500">存放位置</p>
                    <p class="font-medium text-gray-800">{{ parcel.location || "待确定" }}</p>
                  </div>
                </div>
                
                <div class="flex items-center space-x-3">
                  <div class="p-2 bg-teal-50 rounded-lg">
                    <i class="fas fa-user-tie text-teal-600 text-sm"></i>
                  </div>
                  <div>
                    <p class="text-xs text-gray-500">派送人</p>
                    <p class="font-medium text-gray-800">{{ parcel.deliveryPerson || "待分配" }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页控制 -->
      <div v-if="totalPages > 1" class="flex justify-center items-center mt-8 space-x-4">
        <button @click="prevPage"
                :disabled="currentPage === 1"
                :class="[
                  'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center space-x-2',
                  currentPage === 1
                    ? 'text-gray-400 cursor-not-allowed bg-gray-50'
                    : 'text-gray-700 hover:bg-gray-100 bg-white border border-gray-200 hover:border-gray-300'
                ]">
          <i class="fas fa-chevron-left text-xs"></i>
          <span>上一页</span>
        </button>
        
        <div class="flex items-center space-x-2">
          <span v-for="page in visiblePages" :key="page"
                @click="goToPage(page)"
                :class="[
                  'w-10 h-10 flex items-center justify-center rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                  page === currentPage
                    ? 'bg-blue-500 text-white shadow-md'
                    : typeof page === 'number' 
                      ? 'text-gray-700 hover:bg-gray-100 bg-white border border-gray-200'
                      : 'text-gray-400 cursor-default'
                ]">
            {{ page }}
          </span>
        </div>
        
        <button @click="nextPage"
                :disabled="currentPage === totalPages"
                :class="[
                  'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center space-x-2',
                  currentPage === totalPages
                    ? 'text-gray-400 cursor-not-allowed bg-gray-50'
                    : 'text-gray-700 hover:bg-gray-100 bg-white border border-gray-200 hover:border-gray-300'
                ]">
          <span>下一页</span>
          <i class="fas fa-chevron-right text-xs"></i>
        </button>
      </div>
    </div>
    
    <!-- 发布包裹模态框 -->
    <PublishParcelModal 
      :show="showPublishModal"
      @close="closeModal"
    />
  </div>
</template>

<script>
import { myParcels } from "@/mock/myParcels";
import PublishParcelModal from "@/components/PublishParcelModal.vue";

export default {
  name: "MyParcels",
  components: { PublishParcelModal },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 3,
      parcels: myParcels,
      showPublishModal: false,
      expandedItems: []
    };
  },
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.parcels.length / this.itemsPerPage);
    },
    
    // 获取当前页的数据
    displayedParcels() {
      if (this.currentPage > this.totalPages && this.totalPages > 0) {
        this.currentPage = this.totalPages;
      }

      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = Math.min(start + this.itemsPerPage, this.parcels.length);

      return this.parcels.slice(start, end);
    },
    
    // 计算可见的页码
    visiblePages() {
      const pages = [];
      const total = this.totalPages;
      const current = this.currentPage;
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i);
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(total);
        } else if (current >= total - 3) {
          pages.push(1);
          pages.push('...');
          for (let i = total - 4; i <= total; i++) {
            pages.push(i);
          }
        } else {
          pages.push(1);
          pages.push('...');
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(total);
        }
      }
      
      return pages;
    }
  },
  methods: {
    // 分页相关方法
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    
    goToPage(page) {
      if (typeof page === 'number' && page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },

    // 展开/收起详情
    toggleDetails(index) {
      const itemIndex = this.expandedItems.indexOf(index);
      if (itemIndex > -1) {
        this.expandedItems.splice(itemIndex, 1);
      } else {
        this.expandedItems.push(index);
      }
    },

    // 样式相关方法
    getStatusClass(status) {
      switch (status) {
        case "已到达":
          return "bg-green-100 text-green-700 border-green-200";
        case "正在派送":
          return "bg-blue-100 text-blue-700 border-blue-200";
        case "待接单":
          return "bg-yellow-100 text-yellow-700 border-yellow-200";
        case "已取消":
          return "bg-gray-100 text-gray-700 border-gray-200";
        default:
          return "bg-blue-100 text-blue-700 border-blue-200";
      }
    },
    
    getStatusBgColor(status) {
      switch (status) {
        case "已到达":
          return "bg-green-100";
        case "正在派送":
          return "bg-blue-100";
        case "待接单":
          return "bg-yellow-100";
        case "已取消":
          return "bg-gray-100";
        default:
          return "bg-blue-100";
      }
    },
    
    getStatusIconColor(status) {
      switch (status) {
        case "已到达":
          return "text-green-600";
        case "正在派送":
          return "text-blue-600";
        case "待接单":
          return "text-yellow-600";
        case "已取消":
          return "text-gray-500";
        default:
          return "text-blue-600";
      }
    },

    // 业务操作方法
    publishNewParcel() {
      this.showPublishModal = true;
    },

    closeModal() {
      this.showPublishModal = false;
    },

    editParcel(parcel) {
      // 编辑包裹逻辑
      console.log('编辑包裹:', parcel);
    },

    cancelParcel(parcel) {
      // 取消包裹逻辑
      if (confirm('确定要取消这个包裹吗？')) {
        console.log('取消包裹:', parcel);
        // 这里可以调用API取消包裹
      }
    }
  }
};
</script>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

</style>